<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <span style="margin-right: 5px; font-size: small;">
      <span>{{startNum}}</span>
      -
      <span> {{endNumber}}&nbsp;/&nbsp;</span>
       {{ total }}
      </span>
          <el-button-group class="ml-1">
          <el-button type="primary" :disabled="startNum < defaultPageSize" :icon="ArrowLeftBold" @click="currentChange('pre')"></el-button>
          <el-button  type="primary" :disabled="endNumber == total"  :icon="ArrowRightBold" @click="currentChange('next')" ></el-button>
        </el-button-group>
  </div>
</template>

<script setup lang="ts">
import {ArrowLeftBold ,ArrowRightBold } from '@element-plus/icons-vue';
import { ref, watch } from 'vue';
import type { PaginationStructure } from '.';
const propsConfig = defineProps<{param : PaginationStructure | undefined}>();
const total = ref<number>(0);
const startNum = ref<number>(0);
const endNumber = ref<number>(0);
const defaultPageSize = ref<number>(80);
const emits = defineEmits(['clickCallBack']);


const currentChange = (type : string) =>{
  console.log(type);
  cal(type);
  emits('clickCallBack',{
    pageSize : defaultPageSize.value,
    start : startNum.value- 1,
  })
}

//计算按钮类型的
const cal = (type :string) =>{
  //
  if(type == 'pre'){
    //81-1
    endNumber.value = startNum.value -1;
    //81-80
    startNum.value = startNum.value - defaultPageSize.value;
  }
  if(type == 'next'){
    //80 + 1
    startNum.value = endNumber.value + 1;
    //81~128     128-80 = 48   81 ~ 160
    //eg:  81 ~ 160   ||   81 ~128
    endNumber.value = total.value - startNum.value -1 <= defaultPageSize.value ? total.value :  defaultPageSize.value + startNum.value -1;
  }
}

//计算


watch(() => propsConfig.param,
    async (val) => {
    if(val){
      total.value = val.totalNum;
      defaultPageSize.value = val.pageSize;
      startNum.value = 1;
      endNumber.value = total.value - startNum.value -1 <= defaultPageSize.value ? total.value :  defaultPageSize.value + startNum.value -1;
    }
  },
  { deep: true, immediate: true }
);

</script>

<style scoped>

</style>
